<template>
	<div>
		<el-dialog :visible.sync="dialogVisible" append-to-body width="62%">
			<div><b class="f20">国家药监局综合司关于同意筹建中医器械标准化技术归口单位和医用高通是什么时期国家药监局综合司关于同意筹建中医器械标准化技术</b></div>

			<p class="f12 gray_f"><span>XXXXX公司 2022-01-01 发布</span></p>
			<span>
				一、XXXXXXX规则
				这里是内容，测试设备租赁：需要一台SS-01型测试仪，需要市场本身不产生测试撒吃撒承办室内场景三，生产部按不出手册。首次把和传播洒出，首次把就变成撒举报。
				水泥厂捐出啊四川省南充是。市场八级很差撒不错撒吃比萨吃撒吃撒从，吃撒吃撒不差，擦拭布查收擦拭不错阿萨。这里是内容，测试设备租赁：需要一台SS-01型测试仪，需要市场本身不产生测试撒吃撒承办室内场景三，生产部按不出手册。首次把和传播洒出，首次把就变成撒举报。
				水泥厂捐出啊四川省南充是。市场八级很差撒不错撒吃比萨吃撒吃撒从，吃撒吃撒不
			</span>
			<span slot="footer" class="dialog-footer flex_between">
				<el-button size="small" type="primary" icon="el-icon-paperclip" @click="dialogVisibleFujian=true">附 件</el-button>
				<el-button type="default" size="small" @click="dialogVisible = false">关 闭</el-button>
			</span>
		</el-dialog>
		<el-dialog title="附件" :visible.sync="dialogVisibleFujian" width="600px">
			<div>
				<el-table :data="list" style="width: 100%" @select="selectChange">
					<el-table-column type="selection" width="50" :selectable="selectable"></el-table-column>
					<el-table-column type="index" label="序号" width="50"></el-table-column>
					<el-table-column prop="name" label="文件"></el-table-column>
				</el-table>
			</div>
			<div slot="footer" class="flex_start">
				<el-button type="primary" size="small" @click="handlerPrint">下载</el-button>
				<el-button type="primary" clas="ml30" size="small" @click="handlerPrint">打印</el-button>
			</div>
			<pdf :pdfUrl="src" ref="pdf"></pdf>
		</el-dialog>
	</div>
</template>

<script>
import pdf from '@/components/pdf/index.vue';
import { PDFDocument } from 'pdf-lib';
const printJs = require('print-js');
export default {
  components: {
    pdf
  },
  props: {
    detail: {}
  },
  data() {
    return {
      src: '',
      dialogVisible: false,
	  dialogVisibleFujian:false,
      list: [{name:'XXXXXXXXXXXXXXXXXXXXXXXXXXXXX.pdf'},{name:'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.pdf'}],
      printable: []
    };
  },
  watch: {
    detail: {
      handler(newVal) {
        this.list = [newVal];
      },
      deep: true
    }
  },
  methods: {
    selectable(row, index) {
      console.log(row);
      return row.isEncryption == 1 ? false : true;
    },
    selectChange(selection) {
      this.printable = selection;
    },
    pre(item) {
      if (item.templateCover) {
        this.src = item.templateCover;
        this.$refs.pdf.open();
      } else {
        this.$message.error('没有封面可预览');
      }
    },
    init() {
      this.dialogVisible = true;
    },
    async handlerPrint() {
      if (this.printable.length == 0) {
        this.$message.error('请选择要打印文件!');
        return;
      }
      let printable = this.printable.filter(item => item.pdfTemplateFile).map(item => item.pdfTemplateFile);
      if (printable.length != 0) {
        const mergedPdf = await PDFDocument.create();
        for (const pdfCopyDoc of printable) {
          const pdfBytes = await fetch(pdfCopyDoc).then(res => res.arrayBuffer());
          const pdf = await PDFDocument.load(pdfBytes);
          const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
          copiedPages.forEach(page => {
            mergedPdf.addPage(page);
          });
        }
        const mergedPdfFile = await mergedPdf.save();
        const blob = new Blob([mergedPdfFile], { type: 'application/pdf' });
        const url = window.URL.createObjectURL(blob);
        try {
          printJs({
            printable: url,
            type: 'pdf'
            // targetStyles:['*']
          });
        } catch (e) {
          console.log(e);
        }
      } else {
        this.$message.error('当前选中文件缺少必要内容,请确认!');
      }
    }
  }
};
</script>

<style></style>
